<script lang="ts" setup>
// #region 引入包, 函数和组件
import { inject, ref } from "vue"
import { searchHotsApi } from "@/services" // 热门搜索接口
import { useMusicStore } from "@/store"
import type { SearchHotsItem } from "@/services/type"
import type { ProvideInject } from "../search.vue"
// #endregion

// #region // 使用模块(仓库、路由、父组件参数函数)
const music = useMusicStore()
const emits = defineEmits<{
  (e: "getResult", value: string): void
}>()
const search = inject<ProvideInject>('search')
// #endregion

// #region // 变量
const hotsList = ref<SearchHotsItem[]>([])
// #endregion

// #region // 函数
const init = async () => {
  try {
    // 显示加载中
    music.changeLoading(true)
    // 调接口
    const res = await searchHotsApi()
    // console.log(res)
    // 接受数据
    hotsList.value = res.data
    // console.log(hotsList.value)
    // 隐藏加载中
    music.changeLoading(false)
  } catch (error) {
    console.log(error)
  }
}
// #endregion

// #region // 生命周期和vue函数
init()
// #endregion
</script>

<template>
  <view class="hots">
    <uni-section
      class="title"
      title="热门搜索"
      type="line"
    ></uni-section>
    <view class="list">
      <view class="item" v-for="(item, index) in hotsList" :key="item.searchWord">
        <view :class="['no', { up: index < 3 }]">{{ index + 1 }}</view>
        <view class="name"  @click="search?.toResult(item.searchWord)">{{ item.searchWord }}</view>
        <image :src="item.iconUrl" mode="aspectFill"></image>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.title {
  :deep(.line) {
    background: $uni-bg-color-wyyRed;
  }
}
.item {
  padding-bottom: 20rpx;
  display: flex;
  align-items: center;
  .no {
    margin: 0 10rpx 0 20rpx;
    font-weight: 560;
    box-sizing: border-box;
    color: $uni-text-color;
    &.up {
      color: $uni-bg-color-wyyRed;
    }
  }
  .name {
    font-size: $uni-font-size-base;
    margin-right: 10rpx;
  }
  image {
    width: 28rpx;
    height: 28rpx;
  }
}
</style>
